<template>
    <el-tabs type="border-card" v-model="tabName" @tab-click="request">
      <!-- 未注销显示内容 -->
      <el-tab-pane label="未注销" name="uncancelled">
        <SearchAdd :openAddDialog='openAddDialog' :cancellation='cancellation' :show="0" :flag="0" @send-data="searchDoctor" :allType="allType"></SearchAdd>
        <el-table
          ref="filterTable,multipleTable"
          tooltip-effect="dark"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @row-click="test"
        >
          <el-table-column type="selection" :width="untableWidth" align="center"></el-table-column>
          <el-table-column prop="doctorId" label="ID" :width="untableWidth" align="center"></el-table-column>
          <el-table-column prop="doctorName" label="姓名" :width="untableWidth" align="center"></el-table-column>
          <el-table-column prop="doctorPosition" label="职位" :width="untableWidth" align="center"></el-table-column>
          <el-table-column prop="doctorIntroduction" label="介绍" :width="untableWidth" align="center">
            <template #default="scope">
              <el-popover effect="light" trigger="hover" placement="right" width="530">
                <template #default>
                  <div class="set-popper">{{ scope.row.doctorIntroduction }}</div>
                </template>
                <template #reference>
                  <div class="set-content">
                    {{ scope.row.doctorIntroduction }}
                  </div>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="registrationFee" label="就诊费" :width="untableWidth" align="center"></el-table-column>
          <el-table-column prop="requirementTypes" label="擅长领域" :width="untableWidth" show-overflow-tooltip :formatter="formatter">
          </el-table-column>
          <el-table-column label="操作" :width="untableWidth">
            <el-button type="primary" @click="openUpdateDialog">修改</el-button>
            <el-button type="danger" @click="cancellation">注销</el-button>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 已注销显示内容 -->
      <el-tab-pane label="已注销" name="cancelled">
        <SearchAdd :flag="1" :show="0" @send-data="searchDoctor" :allType="allType"></SearchAdd>
        <el-table
          ref="filterTable,multipleTable"
          tooltip-effect="dark"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column prop="doctorId" label="ID" :width="tableWidth"></el-table-column>
          <el-table-column prop="doctorName" label="姓名" :width="tableWidth"></el-table-column>
          <el-table-column prop="doctorPosition" label="职位" :width="tableWidth"></el-table-column>
          <el-table-column prop="doctorIntroduction" label="介绍" :width="tableWidth" show-overflow-tooltip>
            <template #default="scope">
              <el-popover effect="light" trigger="hover" placement="right" width="530">
                <template #default>
                  <div class="set-popper">{{ scope.row.treatmentProcess }}</div>
                </template>
                <template #reference>
                  <div class="set-content">
                    {{ scope.row.treatmentProcess }}
                  </div>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="registrationFee" label="就诊费" :width="tableWidth"></el-table-column>
          <el-table-column prop="requirementTypes" label="擅长领域" :width="tableWidth" show-overflow-tooltip :formatter="formatter">
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  
    <!-- 弹窗 -->
    <el-dialog :title="title" v-model="dialogFormVisible" width="30%">
      <!-- 添加医师信息 -->
      <el-form 
        ref="doctor" 
        :model="doctor"
        :rules="rules"
        label-width="80px"
        v-if="isShow?true:false"
      >
        <el-form-item label="医师名字" prop="doctorName">
          <el-input v-model="doctor.doctorName"></el-input>
        </el-form-item>
        <el-form-item label="医师介绍" prop="doctorIntroduction">
          <el-input v-model="doctor.doctorIntroduction"></el-input>
        </el-form-item>
        <el-form-item label="医师职位" prop="doctorPosition">
          <el-input v-model="doctor.doctorPosition"></el-input>
        </el-form-item>
        <el-form-item label="挂号费" prop="registrationFee">
          <el-input v-model.number="doctor.registrationFee"></el-input>
        </el-form-item>
      </el-form>
      <!-- 修改医师信息 -->
      <el-form 
        ref="doctor" 
        :model="doctor"
        :rules="rules"
        label-width="80px"
        v-if="isShow?false:true"
      >
        <el-form-item label="医师名字" prop="doctorName">
          <el-input v-model="doctor.doctorName"></el-input>
        </el-form-item>
        <el-form-item label="医师介绍" prop="doctorIntroduction">
          <el-input v-model="doctor.doctorIntroduction"></el-input>
        </el-form-item>
        <el-form-item label="医师职位" prop="doctorPosition">
          <el-input v-model="doctor.doctorPosition"></el-input>
        </el-form-item>
        <el-form-item label="挂号费" prop="registrationFee">
          <el-input v-model.number="doctor.registrationFee"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel('doctor')">取 消</el-button>
          <el-button type="primary" @click="onSubmit('doctor')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script>
  import SearchAdd from '@/components/SearchAdd.vue';
  import {getDoctorMsg,addDoctor,deleteDoctor,updateDoctor,getAllType,getDoctorMsgByType} from '@/api/secondary_page/doctor_manage'
  import { ElMessage } from 'element-plus'
  
  export default {
      name:"PageDoctorManage",
       data() {
        return {
          untableWidth:'(calc(100% -220))/8',
          tableWidth:'(calc(100% -220))/6',
          title:'',
          tabName:'uncancelled',
          isShow:false,//添加or修改
          flag:1,
          dialogFormVisible:false,//弹窗开关
          tableData: [],//后台返回数据
          multipleSelection: [],//多选选中行数据
          allType:[],//医师擅长领域
          doctor:{//医师对象
            doctorId:0,
            doctorName: '',
            doctorIntroduction: '',
            doctorPosition: '',
            registrationFee:'',
            requirementTypes:[],
            flag:0  
          },
          rules: {//验证规则
            doctorName: [
              { required: true, message: '请输入医师名字', trigger: 'blur' },
              {
                min: 2,
                message: '长度最少 2 个字符',
                trigger: 'blur',
              },
            ],
            doctorIntroduction: [
              { required: true, message: '请输入医师介绍', trigger: 'blur' },
              {
                min: 5,
                message: '长度最少 5 个字符',
                trigger: 'blur',
              },
            ],
            doctorPosition: [
              { required: true, message: '请输入医师擅长邻域', trigger: 'blur' },
              {
                min: 2,
                message: '长度最少 2 个字符',
                trigger: 'blur',
              },
            ],
            registrationFee: [
              { required: true, message: '挂号费不能为空'},
              { type: 'number', message: '挂号费必须为数字值'}
            ],
          }
        }
      },
       methods:{
        //获取医师信息请求封装
        getDoctorsMsg(){
          getDoctorMsg(this.doctor).then(
            response =>{
              this.tableData = response;
              console.log(this.tableData)
            }
          )
        },
        //获取医师信息请求处理
        request(tab){
          // console.log(tab, event);
          // console.log(tab.props.name);
          // console.log(event.target.getAttribute('id'));
          this.doctor = {}
          if(tab.props.name=='uncancelled'){
            this.doctor.flag = 0
          }else{
            this.doctor.flag = 1
          }
          this.getDoctorsMsg()
        },
        //多选函数
        handleSelectionChange(val) {
          this.multipleSelection = val
        },
        //弹窗开关
        openDialog(){
          this.dialogFormVisible = !this.dialogFormVisible
        },
        //打开添加弹窗
        openAddDialog() {
          this.openDialog()
          this.isShow = true
          this.title = '添加医师信息'
        },
        //打开修改弹窗
        openUpdateDialog(row) {
          this.openDialog()
          this.isShow = false
          this.title = '修改医师信息'
          this.test(row);
        },
        //获取el-table选中行数据
        test(row){
          this.doctor = row
          if(this.multipleSelection.length == 0){
            this.multipleSelection.push(row)
          }else{
            this.multipleSelection.forEach((item)=>{
              if(item.doctorId != row.doctorId ){
                this.multipleSelection.push(row)
              }
            })
          }
        },
        //格式化数据
        formatter(row){
          let arr = []
          row.requirementTypes.forEach((item, index)=>{
            if (index > 2) {
              return
            }
            arr.push(item.typeName);
          })
          return arr.join(',')
        },
        //弹窗取消函数
        cancel(formName){
          this.openDialog();
          ElMessage('操作已取消')
          this.$refs[formName].resetFields()
          this.doctor = {}
          this.doctor.flag=0
          this.getDoctorsMsg()
        },
        //提交函数
        onSubmit(formName) {
          this.$refs[formName].validate((valid)=>{
            if (valid) {
              if(this.isShow){
                this.$refs[formName].resetFields()
                addDoctor(this.doctor).then(
                  response=>{
                    console.log(response)
                    if(response == 0){
                      ElMessage.error('添加失败')
                    }else if(response == 1){
                      ElMessage.success({
                        message: '添加成功',
                        type: 'success',
                      })
                      this.$refs[formName].resetFields()
                    }
                  }
                ) 
              }else{
                updateDoctor(this.doctor).then(
                  response=>{
                    console.log(response)
                    if(response == 0){
                      ElMessage.error('修改失败')
                    }else if(response == 1){
                      ElMessage.success({
                        message: '修改成功',
                        type: 'success',
                      })
                    }
                  }
                )
              }
              this.openDialog()
            } else {
              ElMessage.error('验证未能通过或信息未填写完整')
              return false
            }
          })
        },
        //注销函数
        cancellation() {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.multipleSelection.forEach((item)=>{
              deleteDoctor(item.doctorId).then(
                response => {
                  if(response == 1){
                    this.$message({
                      type: 'success',
                      message: '删除成功!',
                    })
                      this.doctor = {}
                      this.doctor.flag = 0
                      this.getDoctorsMsg()
                  }else{
                      ElMessage.error('删除失败')
                  }
                }
              )
            })
            this.multipleSelection = []
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
        },
        filterHandler(value, row, column) {
          const property = column['property']
          return row[property] === value
        },
        //搜索函数
        searchDoctor(input,type,o){
          console.log(input+'----'+type+'----'+o)
          if(o){
            if(isNaN(input)){
              this.doctor.doctorName = input
              this.doctor.doctorIntroduction = input
              this.doctor.doctorPosition = input
            }else{
              this.doctor.doctorId = input
            }
            this.getDoctorsMsg()
          }else{
            getDoctorMsgByType(type,this.doctor.flag).then(
              response =>{
                this.tableData = response;
              }
            )
          }
        },
      },
      mounted(){
        this.doctor = {}
        this.doctor.flag = 0
        this.getDoctorsMsg()
        getAllType().then(
          response =>{
            this.allType = response;
          }
        )
      },
      components:{
        SearchAdd,
      }
  }
  </script>
  
  <style scoped>
.set-popper {
  width:500px;
}
.set-content {
  cursor: default;
  width: 100%;
  overflow: hidden;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
  </style>
  
  
  
  